<template>
	<AppCol noRoot :layoutOpts="layoutOpts">
		<div :class="classNames">
			<div
				v-if="isShowTitle && title"
				class="app-control-dashboard__portlet__header"
			>
				{{ title }}
			</div>
			<div class="app-control-dashboard__portlet__content">
				<AppRow :layoutOpts="layoutOpts" :gutter="[16, 16]">
					<slot></slot>
				</AppRow>
			</div>
		</div>
	</AppCol>
</template>

<script setup lang="ts">
import { portletContainerProps } from '../portlet';
import { AppCol } from '@/components/common/col';
import { AppRow } from '@/components/common/row';
const props = defineProps(portletContainerProps);

const classNames = reactive({
	'app-control-dashboard__portlet': true,
	'app-portlet-container': true,
	[props.name]: true,
	...props.classNames,
});
</script>
